<script setup lang="ts">
import {ref, onMounted} from "vue";
import axios from "axios";
import {useRoute} from "vue-router";
import router from "@/router";
import IngredientItem from "@/components/IngredientItem.vue";
import {checkIsInStore} from '@/util/checkHasStore'
const fragranceInfo = ref(Object)

const route = useRoute()
const isBad = ref(false)
const fragranceId = ref(0)


const initData = () => {
  axios.post(`/api/fragrance/get/${fragranceId.value}`,{},{
    headers:{
      token:localStorage.getItem("patient-auth-token")
    }
  })
      .then(res => {
        // console.log(res)
        if (res.data.success) {
          const msg = res.data.message
          let ingredientList = msg.ingredientInfos//获取列表
          for (let i = 0; i < ingredientList.length; i++) {
            if(checkIsInStore(ingredientList[i].name,"Ingredient-data-list","name")){
              ingredientList[i].isAdd=true
            }else{
              ingredientList[i].isAdd=false
            }
          }
          msg.ingredientInfos = ingredientList
          console.log(msg)
          fragranceInfo.value = msg
        } else {
          isBad.value = true
          setTimeout(() => {
            router.push('/')
          }, 1000)
        }
      })
}
onMounted(() => {
  fragranceId.value = route.query.id
  console.log(route.query.id)
  setTimeout(() => (
      initData()
  ))
})
const back = () => {
  router.push("/ingredient")
}
</script>

<template>
  <div class="ingredient-detail-main">
    <q-card style="width: 100vw" v-show="isBad">
      <q-item>
        <q-item-section avatar style="height: 20vh">
          <q-skeleton type="QAvatar"/>
        </q-item-section>

        <q-item-section style="height: 60vh">
          <q-item-label>
            <q-skeleton type="text"/>
          </q-item-label>
          香水信息异常，即将返回首页
          <q-item-label caption>
            <q-skeleton type="text"/>
          </q-item-label>
        </q-item-section>
      </q-item>

      <q-skeleton height="200px" square/>

      <q-card-actions align="right" class="q-gutter-md">
        <q-skeleton type="QBtn"/>
        <q-skeleton type="QBtn"/>
      </q-card-actions>
    </q-card>
    <div class="top-back">
      <q-btn outline round color="grey-4" icon="arrow_back_ios" @click="back"/>
    </div>
    <div class="fragrance-item-title text-h4 text-center">
      {{ fragranceInfo.name }}
    </div>
    <div class="text-body1 flex align-item-center justify-content-center">
      <div style="min-width: 40vw;text-align: center;max-width: 60vw">
        {{ fragranceInfo.introduce }}
      </div>
    </div>
    <div class="ingredient-group">
      <IngredientItem
      v-for="(item,index) in fragranceInfo.ingredientInfos"
      :key="index"
      :name="item.name"
      :img="item.img"
      :ingredient-id="item.ingredientId"
      :fragrance-noted-id="item.fragranceNoteId"
      :is-add="item.isAdd"
      />
    </div>
  </div>
</template>

<style scoped lang="scss">
.ingredient-detail-main {
  width: 100vw;
  display: flex;
  flex-direction: column;



  .fragrance-item-title {
    margin-top: 20xp;
    margin-bottom: 20px;
  }

  .ingredient-group {
    display: flex;
    flex-wrap: wrap;
    width: 90vw;
    margin-left: 5vw;
    margin-right: 5vw;
    justify-content: space-around;
  }
}
</style>
